<template>
  <div class="centent">
    <div class="header">
      <div style="width:20px;height:10px;"></div>
      <el-button type="primary" @click.native="aduseradmin">
        <i class="el-icon-plus"></i>新建角色
      </el-button>
    </div>
    <div class="lists">
      <el-table :data="list" border  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" style="width: 100%">
        <el-table-column type="index" align="center" width="50"></el-table-column>

        <el-table-column prop="name" label="角色名称" align="center" width="120"></el-table-column>
        <el-table-column prop="remark" align="center" label="说明"></el-table-column>
        <el-table-column prop="city" align="center" label="功能模块"></el-table-column>
        <el-table-column prop="created_at" label="创建日期" align="center" width="150"></el-table-column>

        <el-table-column label="管理" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="handleClick(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handldel(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
       <div class="block">
          <el-pagination
        :current-page.sync="page"
        :page-size="10"
        @current-change="changePage"
        layout="total, prev, pager, next"
        :total="allpage"
      ></el-pagination>
       </div>
    </div>
    <div class="prop" v-show="addstatus">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="height:400px;">
        <div class="propheader">
          {{type==1?'新建角色':'编辑角色'}}
          <el-button type="text" class="close1" @click.native="setaddstatus">关闭</el-button>
        </div>
        <div class="info">
          <div style="height:20px;width:600px;"></div>
          <el-form ref="form" :model="form" style="width:300px;" label-width="80px">
            <el-form-item label="角色名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="说明">
              <el-input type="textarea" v-model="form.remark" style="width:300px"></el-input>
            </el-form-item>
            <el-form-item label="功能模块">
              <el-cascader
                v-model="moedl"
                :options="options"
                :props="props"
                collapse-tags
                @change="handleChange"
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addsave">完成</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import path from "path";
// import { deepClone } from '@/utils'
import {
  getRoleList,
  getMenusList,
  addROle,
  getroleINFO,
  editRole,
  SETDATE
} from "@/api/System.js";
// import { getRoutes, getRoles, addRole, deleteRole, updateRole } from '@/api/role'
import i18n from "@/lang";

const defaultRole = {
  key: "",
  name: "",
  description: "",

  routes: []
};

export default {
  data() {
    return {
      //角色id
      roleID:'',
      type: 1,
      page: 1,
      list: [],
      allpage: 0,
      moedl: "",
      props: {
        multiple: true,
        value: "id",
        label: "title"
      },
      options: [],
      form: {
        name: "",
        menu_ids: [],
        remark: ""
      },
      addstatus: false
    };
  },
  computed: {},
  created() {
    this.getlist();
    this.getmenus();
  },
  methods: {
    addsave() {
      // console.log(this.form);
      if (!this.form.name) {
        this.$message({
          message: "角色名称不能为空",
          type: "warning"
        });
        return;
      }
     
      if (this.form.menu_ids.length < 1) {
        this.$message({
          message: "功能模块不能为空",
          type: "warning"
        });
        return;
      }
      //id为3,4,5,6为比选模块
      var status = this.isContained(this.form.menu_ids, [3, 4, 5, 6]);
      if (!status) {
        this.$message({
          message: "我的申请与我的审批为必选模块",
          type: "warning"
        });
        return;
      }
      // console.log("xxxxx");
      this.form.menu_ids = this.form.menu_ids.join(",");
      // console.log(this.form);
      if(this.type==1){
        addROle(this.form).then(res => {
        if (res.code == 200) {
          this.page = 1;
          this.allpage = 0;

          this.getlist();
          this.setaddstatus();
          this.$message({
            message: "角色添加成功",
            type: "success"
          });
        }
      });
      }else{
        
        editRole({id:this.roleID,data:this.form}).then(res=>{
  if (res.code == 200) {
          this.page = 1;
          this.allpage = 0;

          this.getlist();
          this.setaddstatus();
          this.$message({
            message: "角色修改成功",
            type: "success"
          });
        }
        })
      }
     
    },
    //点击添加
    aduseradmin() {
      this.type = 1;
      this.setaddstatus();
    },
    //判断包含
    isContained(a, b) {
      if (!(a instanceof Array) || !(b instanceof Array)) return false;
      if (a.length < b.length) return false;
      var aStr = a.toString();
      for (var i = 0, len = b.length; i < len; i++) {
        if (aStr.indexOf(b[i]) == -1) return false;
      }
      return true;
    },

    handleChange(value) {
      var arr2 = value.reduce(function(a, b) {
        return a.concat(b);
      });
      arr2 = this.uniq(arr2);
      // console.log(arr2);
      this.form.menu_ids = arr2;
    },
    //获取权限树
    getmenus() {
      getMenusList({type:1}).then(res => {
        if (res.code == 200) {
          // console.log(res);
          this.options = res.data;
        }
      });
    },
    //数组去重
    uniq(array) {
      var temp = []; //一个新的临时数组
      for (var i = 0; i < array.length; i++) {
        if (temp.indexOf(array[i]) == -1) {
          temp.push(array[i]);
        }
      }
      return temp;
    },
    changePage(e) {
      // console.log(e);
      this.page = e;
      this.getlist();
    },
    getlist() {
      let data = {
        per: 10,
        page: this.page
      };
      getRoleList(data).then(res => {
        if (res.code == 200) {
          this.list = [];
          this.list = res.data.data;
          this.list.forEach(element => {
            element.created_at=SETDATE(element.created_at)
          });
          this.allpage = Number(res.data.total);
          this.page = Number(res.data.current_page);
        } else {
          this.list = [];
        }
      });
    },
    setaddstatus() {
      if (this.addstatus) {
        this.form.menu_ids = [];
        this.form.name = "";
        this.moedl = "";
        this.form.remark = "";
      }
      this.addstatus = !this.addstatus;
    },
    handleClick(row) {
      if(row.id==1){
        this.$message({
          message:'不能编辑超级管理员',
          type:'warning'
        })
        return
      }
      this.type = 2;
      this.roleID=row.id
      getroleINFO({ id: row.id }).then(res => {
        // console.log(res);
        if(res.code==200){
          this.form.name=res.data.name
          this.form.remark=res.data.remark
          this.form.menu_ids=res.data.menu_ids.split(",")
          this.moedl=res.data.ids
          // console.log(this.form)
        }
      });
      this.setaddstatus();
    },
    handldel(e) {
      if(e.id==1){
        this.$message({
          message:'超级管理员不能删除',
          type:'warning'
        })
        return
      }
      // console.log(e);
      this.$confirm("此操作将删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
.header {
  height: 40px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.lists {
  width: 97%;
  margin: 0 auto;
  margin-top: 10px;
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.warpprop {
  width: 600px;
  height: 320px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
}
.info {
  width: 500px;
  margin: 0 auto;
}
.hidenn {
  width: 90%;
  display: flex;
  height: 250px;
  flex-wrap: wrap;
  margin: 0 auto;
}
.hidenn::-webkit-scrollbar {
  // 纵向滚动条和横向滚动条宽度
  width: 2px;
  // height: 1px;
}

.hidenn::-webkit-scrollbar-thumb {
  // 滚动条背景条样式
  border-radius: 1px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #5b5f63;
}
.hidenn::-webkit-scrollbar-track {
  // 滚动条按钮样式
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 1px;
  background: #00284d;
}

.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.block{
  float: right;
}
</style>
